<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="setting-container">
    <div class="body-container">
      <div class="body-header">
        <span class="title">告警设置</span>
      </div>
      <el-table :data="data.tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="设备名称" width="180" />
        <el-table-column prop="address" label="设备位置" />
        <el-table-column prop="date" label="IP地址" width="180" />
        <el-table-column prop="name" label="告警设置" width="180" />
        <el-table-column prop="name" label="操作" width="180">
          <template #default>
            <span
              class="table-action"
              @click="handleDetial"
              style="color:rgba(24, 144, 255, 1);cursor:pointer"
            >编辑</span>
            <span
              class="table-action"
              @click="handleDetial"
              style="color:rgba(24, 144, 255, 1);cursor:pointer"
            >删除设置</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[10, 20, 30, 40]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="    display: flex;justify-content: flex-end;    align-items: center;height:50px;"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";

const data = reactive({
  tableData: [],
  total: 0,
  pageSize4: 10,
  currentPage4: 1
});
</script>

<style lang='less' scoped>
.setting-container {
  flex: 1;
  padding: 24px;
  background: rgba(0, 16, 61, 1);
  position: relative;
  .body-container {
    background: #ffffff;
    position: absolute;
    left: 24px;
    right: 24px;
    top: 24px;
    bottom: 24px;
    padding: 20px;
    .body-header {
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 21px;
    }
  }
}
</style>